<template>
  <view class="my-home">
    <!-- 页面标题 start -->
    <!-- <cu-custom bgColor="bg-gradual-blue">
      <block slot="content">面试必过</block>
    </cu-custom> -->
    <!-- 页面标题 end -->

    <!-- 用户信息区域 start -->
    <view class="user-info">
      <view class="user-avatar">
        <image
          class="avatar-img"
          src="/static/home/avatar.jpg"
          mode="aspectFill"
        ></image>
      </view>
      <view class="user-details">
        <view class="user-name">面试达人</view>
        <view class="user-desc">前端开发工程师</view>
      </view>
    </view>

    <!-- 用户信息区域 end -->

    <!-- 功能菜单 start -->
    <view class="menu-section">
      <view class="menu-item" @click="goToSettings">
        <view class="menu-icon">
          <view class="iconfont icon-shoucang-yishoucang"></view>
        </view>
        <text class="menu-text">我的收藏</text>
        <view class="menu-arrow">
          <view class="iconfont icon-right"></view>
        </view>
      </view>

      <view class="menu-item" @click="goToSettings">
        <view class="menu-icon">
          <view class="iconfont icon-liulanlishi"></view>
        </view>
        <text class="menu-text">浏览历史</text>
        <view class="menu-arrow">
          <view class="iconfont icon-right"></view>
        </view>
      </view>

      <view class="menu-item" open-type="feedback">
        <view class="menu-icon">
          <view class="iconfont icon-wentifankui"></view>
        </view>
        <text class="menu-text">问题反馈</text>
        <view class="menu-arrow">
          <view class="iconfont icon-right"></view>
        </view>
      </view>

      <view class="menu-item" @click="handlePhoneOpen">
        <view class="menu-icon">
          <view class="iconfont icon-lianxiwomen"></view>
        </view>
        <text class="menu-text">技术支持</text>
        <view class="menu-arrow">
          <view class="iconfont icon-right"></view>
        </view>
      </view>

      <view class="menu-item" @click="previewImage">
        <view class="menu-icon">
          <view class="iconfont icon-weixingongzhonghao"></view>
        </view>
        <text class="menu-text">微信公众号</text>
        <view class="menu-arrow">
          <view class="iconfont icon-right"></view>
        </view>
      </view>
    </view>
    <!-- 功能菜单 end -->

    <!-- 退出登录按钮 start -->
    <view class="logout-section">
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
    <!-- 退出登录按钮 end -->
  </view>
</template>

<script setup>
// 跳转到设置页面
const goToSettings = () => {
  uni.showToast({
    title: "暂未开发",
    icon: "info",
    mask: true,
  });
};
// 大图展示
const previewImage = () => {};
// 拨打电话
const handlePhoneOpen = () => {
  uni.makePhoneCall({
    phoneNumber: "17503237677",
    fail: () => {},
    complete: () => {},
  });
};

// 退出登录
const logout = () => {
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: function (res) {
      if (res.confirm) {
        // 执行退出登录逻辑
        uni.reLaunch({
          url: "/pages/login/index",
        });
      }
    },
  });
};
</script>

<style scoped lang="scss">
.my-home {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-info {
  background: linear-gradient(135deg, #0387f7 0%, #19b5bc 100%);
  padding: 260rpx 40rpx 40rpx;
  color: #fff;
  display: flex;

  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    margin-right: 30rpx;

    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }

  .user-details {
    flex: 1;

    .user-name {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .user-desc {
      font-size: 28rpx;
      opacity: 0.9;
      margin-bottom: 30rpx;
    }

    .user-stats {
      display: flex;

      .stat-item {
        flex: 1;
        text-align: center;

        .stat-number {
          display: block;
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 5rpx;
        }

        .stat-label {
          font-size: 24rpx;
          opacity: 0.9;
        }
      }
    }
  }
}

.menu-section {
  background-color: #fff;
  margin: 20rpx 0;
  border-radius: 20rpx;
  overflow: hidden;

  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: #f5f5f5;
    }

    .menu-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;

      .iconfont {
        color: #1890ff;
        font-size: 36rpx;
      }
    }

    .menu-text {
      flex: 1;
      font-size: 30rpx;
      color: #333;
    }

    .menu-arrow {
      .iconfont {
        color: #ccc;
        font-size: 28rpx;
      }
    }
  }
}

.logout-section {
  padding: 40rpx;

  .logout-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #fff;
    border: none;
    border-radius: 50rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;

    &:after {
      border: none;
    }
  }
}
</style>
